<template>
  <div class="tags" v-if="showTags">
      <ul>
          <li class="tags-li" v-for="(item,index) in tagList"  :key="index" :class="{active : isActive(item.path)}">
              <router-link :to="item.path"  class="tags-li-title">
                  {{item.title}}
              </router-link>
              <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
          </li>
      </ul>
      <div class="tag-close-box">
            <el-dropdown @command="handleTags">
                <el-button size="mini" type="primary">
                    标签选项<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu size="small" slot="dropdown">
                    <el-dropdown-item command="other">关闭其他</el-dropdown-item>
                    <el-dropdown-item command="all">关闭所有</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
      </div>
  </div>
</template>

<script>
import bus from './bus';
export default {
    data(){
        return{
            tagList:[
                
            ]
        }
    },
    methods:{
        handleTags(command){
                command === 'other' ? this.closeOther() : this.closeAll();
            },
            isActive(path) {
                return path === this.$route.fullPath;
                consle.log(this.$route.fullPath)
            },
            //关闭单个标签
            closeTags(index){
                const delItem = this.tagList.splice(index, 1)[0];
                
                
                const item = this.tagList[index] ? this.tagList[index] : this.tagList[index - 1];
                
                if (item) {
                    delItem.path === this.$route.fullPath && this.$router.push(item.path);
                }else{
                    this.$router.push('/dashboard');
                }
            },
            // 关闭全部标签
            closeAll(){
                this.tagList = [];
                this.$router.push('/first')

            },
             // 关闭其他标签
            closeOther(){
                const curItem = this.tagList.filter(item=>{
                    return item.path === this.$route.fullPath;
                })
                this.tagList = curItem
            },
        //设置标签
        setTags(route){
            const isExist = this.tagList.some(item=>{
                return item.path === route.fullPath
            })
            if(!isExist){
                if(this.tagList.length>=8){
                    this.tagList.shift();
                }
                this.tagList.push({
                    title:route.meta.title,
                    path:route.fullPath
                })
            }
        }
},
    created(){
    
        this.setTags(this.$route);
        // bus.$on('close_current_tags', () => {
        //         for (let i = 0, len = this.tagList.length; i < len; i++) {
        //             const item = this.tagList[i];
        //             if(item.path === this.$route.fullPath){
        //                 if(i < len - 1){
        //                     this.$router.push(this.tagList[i+1].path);
        //                 }else if(i > 0){
        //                     this.$router.push(this.tagList[i-1].path);
        //                 }else{
        //                     this.$router.push('/');
        //                 }
        //                 this.tagList.splice(i, 1);
        //             }
        //         }
        //     })
          
    },
    watch:{
            $route(newValue, oldValue){
                this.setTags(newValue);
            }
        },

        computed: {
            showTags() {
                return this.tagList.length > 0;
            }
        },
}
</script>

<style scoped>
.tags{
    position: relative;
    height: 30px;
    overflow: hidden;
    background:#fff;
    padding-right: 120px;
    box-shadow: 0 5px 10px #ddd;

}
.tags ul{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.tags-li{
    float: left;
    margin: 3px 5px 2px 3px;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
    height: 23px;
    line-height: 23px;
    padding: 0 5px 0 12px;
    vertical-align: middle;
    color: #666;
    border: 1px solid #e9eaec;
    background: #fff;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    transition: all .3s ease-in;
    /* box-sizing: border-box; */
}
.tags-li.active {
        background:blue;
    }
 .tags-li:not(.active):hover {
        background:rgba(41, 4, 173, 0.384);
    }



.tags-li.active {
        color: #fff;
    }
ul{
    padding: 0;margin: 0;
    

}
a { text-decoration: none;}
/* li{
    list-style: none;
} */
.tags-li-title {
        float: left;
        max-width: 80px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 5px;
        color: #666;
    }
.tags-li.active .tags-li-title {
        color: #fff;
    }
.tag-close-box{
    position: absolute;
        right: 0;
        top: 0;
        box-sizing: border-box;
        padding-top: 1px;
        text-align: center;
        width: 110px;
        height: 30px;
        background: #fff;
        box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
        z-index: 10;
}
</style>